<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
      charset="UTF-8"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta content="telephone=no" name="format-detection" />
    <title>信丰县南山寺·善行愿祈</title>

    <script src="js/vue.min.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/html2canvas.min.js"></script>
    <script src="js/qrcode.min.js"></script>
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="js/base.js"></script>
  </head>

  <body>
    <div class="loading fixed" style="display: none">
      <section>
        <div class="loader loader-20"></div>
      </section>
    </div>
    <div class="main share" id="app">
      <!-- <div class="fixedTitle">
    <div class="con">
      <img src="img/return.png" class="return">
      <p>行善记录</p>
    </div>
  </div> -->
      <template v-if="!shareTotal">
        <img src="img/xingshan/img1.png" class="fullImg touimg" />
        <div class="xsdetail xsdetail1" v-if="shareDetail!=''">
          <div class="con">
            <div class="xs_yuan">
              <div class="xs_yuan_xx">
                <img :src="shareDetail.headPic" class="headimg" />
                <div class="nickname">
                  <p>发愿人：{{shareDetail.blessName}}</p>
                  <p class="leiji">
                    <span>累计行善{{shareDetail.blessDays}}天</span>
                  </p>
                </div>
                <div class="xs_yuan_jl">
                  <p class="gongde">善款<span>{{shareDetail.money}}元</span></p>
                  <p class="gongde">
                    累计功德<span>{{shareDetail.goodScore}}</span>
                  </p>
                </div>
              </div>
              <div class="info">{{shareDetail.blessContent}}</div>
            </div>
            <div class="zhuchi">
              <div class="zhuchi_xx">
                <img src="img/si.jpg" class="headimg" />
                <p>谛静法师</p>
                <p>
                  <span>当值法师</span>
                </p>
              </div>
              <div class="info">
                @{{shareDetail.blessName}}善信菩萨吉祥🌹！赞叹善信菩萨恒持善行👍三宝兴隆、龙天加护！祝愿：三业清净，违缘消灭，善业增长，身心安乐、家庭幸福，事业圆满，合家康宁！福光常注照，诸方好运享安宁，常行胜因善缘，吉祥安康！🙏🙏🙏
              </div>
            </div>
            <p class="title gongde">
              本次善行收到的众缘赞叹<span>{{shareDetail.helpInfoList.total}}</span>人
            </p>
            <div class="zantan" v-show="sharehelplist.records.length!=0">
              <ul>
                <li v-for="(i,index) in sharehelplist.records">
                  <div class="tit">
                    <p>善信{{i.name}}为本次善行，众缘赞叹，共修功德。</p>
                  </div>
                  <div>
                    <p>
                      <span>{{i.time}}</span>
                    </p>
                    <!-- <p class="gongde">
                  功德<span>+10</span>
                </p> -->
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </template>

      <div class="today" :style="{'margin-top':!shareTotal ?'0.5rem' :'0'}">
        <img src="img/xingshan/img2.png" class="fullImg" />
        <div class="rili" v-if="rili!=''">
          <div class="rili1">
            <p>{{rili.date}}</p>
            <div>{{rili.date.split('-')[2]}}</div>
          </div>
          <div class="rili1" @click="riliShow=true">
            <p>{{rili.lunar}}</p>
            <p>{{rili.lunarYear}} {{rili.animalsYear}}</p>
            <!-- <p>庚子月乙末日</p> -->
            <p><span>{{rili.holiday}}</span></p>
          </div>
          <div class="todayInfo">
            <p>今日善愿发心善信共计<span>{{home.totalPeople}}名</span></p>
            <p>合计善款<span>{{home.totalMoney}}元</span></p>
            <p>统计时间：每天24:00截止</p>
          </div>
        </div>
        <div class="search">
          <div class="con">
            <img src="img/search.png" />
            <input
              type="text"
              placeholder="请输入要搜索的人名"
              v-model="keyWord"
            />
          </div>
          <span @click="search()">搜索</span>
        </div>
        <div class="jiluCon">
          <ul>
            <li v-for="(i,index) in xslist" @click="godetail(i)">
              <div class="info">
                <div class="info_fl">
                  <img :src="i.headPic" class="tx" />
                  <div>
                    <h3>发愿人：{{i.blessName}}</h3>
                    <p><span>累计行善{{i.goodDays}}天</span></p>
                  </div>
                </div>
                <!-- <div class="gongde">
              功德<span>+10</span>
            </div> -->
              </div>
              <div class="msg">愿：{{i.blessContent}}</div>
              <div class="other">
                <span>{{i.createTime}}</span>
                <p
                  class="weizan zan"
                  :class="{yizan : i.hasHelp!=0}"
                  @click="zan(i.id,index)"
                >
                  <img src="img/xi.png" v-show="i.hasHelp==0" />
                  <img src="img/xi1.png" v-show="i.hasHelp!=0" />
                  <span>众缘赞叹{{i.helperNum}}</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <p class="btn" @click="window.location.href='./index.html'">
        <img src="img/home/btn.png" class="fullImg" />
      </p>
      <div
        class="fixed black riliImg"
        style="display: none"
        :style="{'display':riliShow ?'block' :'none'}"
        v-show="riliShow"
      >
        <div class="con">
          <img src="img/xingshan/img1.png" class="fullImg" />
          <img src="img/close1.png" class="close" @click="riliShow = false" />
          <p class="btn" @click="window.location.href='./index.html'">
            <img src="img/home/btn.png" class="fullImg" />
          </p>
        </div>
      </div>

      <div
        class="fixed black xsdetail"
        style="display: none"
        :style="{'display':detailShow ?'flex' :'none'}"
        v-if="detailShow"
      >
        <div class="box">
          <div class="con">
            <div class="xs_yuan">
              <div class="xs_yuan_xx">
                <img :src="detail.headPic" class="headimg" />
                <div class="nickname">
                  <p>发愿人：{{detail.blessName}}</p>
                  <p class="leiji">
                    <span>累计行善{{detail.blessDays}}天</span>
                  </p>
                </div>
                <div class="xs_yuan_jl">
                  <p class="gongde">善款<span>{{detail.money}}元</span></p>
                  <p class="gongde">
                    累计功德<span>{{detail.goodScore}}</span>
                  </p>
                </div>
              </div>
              <div class="info">{{detail.blessContent}}</div>
            </div>
            <div class="zhuchi">
              <div class="zhuchi_xx">
                <img src="img/si.jpg" class="headimg" />
                <p>谛静法师</p>
                <p>
                  <span>当值法师</span>
                </p>
              </div>
              <div class="info">
                @{{detail.blessName}}善信菩萨吉祥🌹！赞叹善信菩萨恒持善行👍三宝兴隆、龙天加护！祝愿：三业清净，违缘消灭，善业增长，身心安乐、家庭幸福，事业圆满，合家康宁！福光常注照，诸方好运享安宁，常行胜因善缘，吉祥安康！🙏🙏🙏
              </div>
            </div>
            <p class="title gongde">
              本次善行收到的众缘赞叹<span>{{detail.helperNum}}</span>人
            </p>
            <div class="zantan" v-show="detailhelplist.records.length>0">
              <ul>
                <li v-for="(i,index) in detailhelplist.records">
                  <div class="tit">
                    <p>善信{{i.name}}为本次善行，众缘赞叹，共修功德。</p>
                  </div>
                  <div>
                    <p>
                      <span>{{i.time}}</span>
                    </p>
                    <!-- <p class="gongde">
                  功德<span>+10</span>
                </p> -->
                  </div>
                </li>
              </ul>
            </div>
            <p class="btn">
              <img
                src="img/btn1.png"
                class="xsbtn"
                @click="window.location.href='./index.html'"
              />
              <img src="img/btn.png" class="sharebtn" @click="share()" />
            </p>
          </div>
          <img src="img/close1.png" class="close" @click="detailClose" />
        </div>
      </div>
      <div
        class="fixed poster"
        style="display: none"
        :style="{'display':posterShow ?'block' :'none'}"
        v-if="posterShow"
      >
        <img
          src="./img/back.png"
          @click="clearPoster"
          class="back-icon"
          alt=""
        />
        <div class="img-box" v-show="!dataURL" v-loading="!dataURL">
          <img class="share-img" :src="shareImg" alt="" />
          <p class="word font-style">
            随喜赞叹@{{detail.blessName}}
            善行愿祈，心灯常亮，众缘赞叹，共修功德。
          </p>
          <p class="font-style" style="margin-top: 0.1rem; width: 1.67rem">
            愿：{{blessContent}}
          </p>
          <p class="tip-text">长按分享图片&nbsp;>>></p>
          <div id="qrcode"></div>
          <p class="tip-text" style="right: 0.12rem; left: auto">
            长按识别二维码
          </p>
        </div>
        <div class="img-box" v-show="dataURL">
          <img class="share-img" :src="dataURL" />
        </div>
      </div>
    </div>

    <script src="font/shareImgs.js"></script>
    <script>
      var vm;
      var id = url.recordId;
      var code = url.code;
      $(function () {
        vm = new Vue({
          el: "#app",
          data: {
            shareImg: share1,
            home: "",
            shareDetail: "",
            detailShow: false,
            xslist: [],
            xspage: 1,
            xspagesize: 10,
            zanpage: 1,
            zanpagesize: 10,
            isjiluScroll: true,
            blessContent: "",
            posterShow: false,
            dataURL: "",

            benzanpage: 1,
            benzanpagesize: 10,
            detail: "",
            detailhelplist: [],

            rili: "",
            riliShow: false,

            keyWord: "",

            detail: "",
            detailId: "",
            shareTotal: false,
            shareShow: false,
          },

          mounted() {
            let that = this;
            if (getCookie("userId") == "" || getCookie("userId") == undefined) {
              if (code == undefined || code == "" || code == null) {
                var url = encodeURIComponent(
                  "http://www.baoyuesi.com.cn/share.html?recordId=" + id
                );
                window.location.href =
                  "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx84b42f343347ca80&redirect_uri=" +
                  url +
                  "&response_type=code&scope=snsapi_userinfo&state=" +
                  new Date().getTime() +
                  "#wechat_redirect ";
              } else {
                that.denglu();
              }
            } else {
              userId = getCookie("userId");
            }
            let queryString = window.location.href.split("?")[1].split("&");
            for (let i = 0; i < queryString.length; i++) {
              const key = queryString[i].split("=")[0];
              const value = queryString[i].split("=")[1];
              if (key === "share") {
                this.shareTotal = Number(value);
              }
            }
            that.info();
            that.homedetail();
            that.jilu();
            that.showrili();

            var height =
              $(window).height() -
              $(".fixedTitle").outerHeight(true) -
              $(".touimg").height() +
              110;
            $(".xslist").height(height);

            $(".jiluCon").scroll(function () {
              var scrollTop = $(this).scrollTop();
              var scrollHeight = $(".jiluCon ul").height();
              var windowHeight = $(this).height();
              // console.log(scrollTop + windowHeight)
              // console.log(scrollHeight)
              if (scrollTop + windowHeight + 10 >= scrollHeight) {
                console.log("加载更多");
                if (that.isjiluScroll) {
                  that.isjiluScroll = false;
                  that.xspage++;
                  that.jilu();
                }
              }
            });

            document.onreadystatechange = function () {
              console.log(document.readyState);
              if (document.readyState == "complete") {
                $(".loading").hide();
              }
            };
          },

          methods: {
            info() {
              let that = this;
              jQuery.get(api + "/app/goodMan/todayGoodList", function (res) {
                if (res.code == 200) {
                  that.home = res.data;
                }
              });
            },
            homedetail() {
              let that = this;
              var url =
                api +
                "app/goodMan/recordDetail/" +
                userId +
                "/" +
                id +
                "/" +
                that.benzanpage +
                "/" +
                that.benzanpagesize;
              jQuery.get(url, function (res) {
                if (res.code == 200) {
                  that.shareDetail = res.data;
                  that.sharehelplist = res.data.helpInfoList;
                }
              });
            },
            jilu() {
              let that = this;
              //var url = api+"app/goodMan/getGoodRecordHelpInfo/"+userId+"/"+that.xspage+"/"+that.xspagesize+"/"+that.zanpage+"/"+that.zanpagesize
              var url =
                api +
                "app/goodMan/searchGood/" +
                that.xspage +
                "/" +
                that.xspagesize +
                "/" +
                userId;
              console.log(url);
              jQuery.get(
                url,
                {
                  keyWord: that.keyWord,
                },
                function (res) {
                  console.log(res);
                  if (res.code == 200) {
                    console.log(res.data.records);
                    that.xslist.push(...res.data.records);
                    that.isjiluScroll = true;
                  }
                }
              );
            },
            search() {
              this.xspage = 1;
              this.xslist = [];
              this.jilu();
            },
            showrili() {
              let that = this;
              jQuery.get(api + "app/goodMan/getCalander", function (res) {
                if (res.code == 200) {
                  that.rili = res.data;
                }
              });
            },
            denglu() {
              let that = this;
              var code1 = code;
              jQuery.post(
                api + "app/goodMan/login",
                {
                  code: code1,
                },
                function (res) {
                  if (res.code == 200) {
                    userId = res.data.id;
                    setCookie("headimg", res.data.headPic);
                    setCookie("nickname", res.data.name);
                    setCookie("userId", userId);
                  }
                }
              );
            },
            zan(id, index) {
              window.event
                ? (window.event.cancelBubble = true)
                : e.stopPropagation();
              let that = this;

              if (that.xslist[index].hasHelp == 1) {
                return false;
              }
              var d = {
                recordId: id,
                userId: userId,
              };
              jQuery.post(api + "/app/goodMan/doHelp", d, function (d) {
                if (d.code == 200) {
                  toastText("赞叹成功");
                  that.xslist[index].hasHelp = 1;
                  that.xslist[index].helperNum++;
                }
              });
            },
            godetail({ id, blessContent }) {
              this.blessContent = blessContent;
              let that = this;
              that.detailId = id;
              var url =
                api +
                "app/goodMan/recordDetail/" +
                userId +
                "/" +
                id +
                "/" +
                that.benzanpage +
                "/" +
                that.benzanpagesize;
              jQuery.get(url, function (res) {
                if (res.code == 200) {
                  that.detail = res.data;
                  that.detailhelplist = res.data.helpInfoList;
                  that.detailShow = true;
                }
              });
            },
            detailClose() {
              this.detailShow = false;
              share();
            },
            clearPoster() {
              this.dataURL = "";
              this.posterShow = false;
            },
            share() {
              this.posterShow = true;
              this.detailShow = false;
              this.$nextTick(() => {
                let urls = window.location.host;
                let queryString = window.location.href.split("?")[1];
                let codeDom = document.getElementById("qrcode");
                let code = new QRCode(codeDom, {
                  text: `http://${urls}/share.html?recordId=${this.detailId}`, // 字符串
                  // text: `http://${urls}/share.html?recordId=${this.detailId}&${queryString}`, // 字符串
                  width: 70,
                  height: 70,
                });
                html2canvas(document.querySelector(".img-box"), {}).then(
                  (canvas) => {
                    this.dataURL = canvas.toDataURL("image/png");
                  }
                );
                jQuery.post(
                  api + "app/goodMan/adminForward",
                  { recordId: this.detailId },
                  (res) => {
                  
                  })
              });
            },
          },
        });
      });
    </script>
  </body>
</html>
